<template>
  <div class="wrap">
    <router-view></router-view>
    <!-- 多条件查询 -->
    <div class="stuff_content" :class="this.$route.path=='/contract/stuff'?'':'no_active'">
      <div class="header_form">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="合同编号:">
            <el-input v-model="form.contractNo"></el-input>
          </el-form-item>
          <el-form-item label="关联项目:">
            <el-select v-model="form.relation" placeholder="请选择">
              <el-option v-for="item in relationList" :key="item.id" :value="item.id" :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="乙方名称:">
            <el-input v-model="form.supplierName"></el-input>
          </el-form-item>
          <el-form-item label="联系人:" style="clear:both">
            <el-input v-model="form.legalPerson"></el-input>
          </el-form-item>
          <el-form-item label="联系方式:">
            <el-input v-model="form.legalPersonPhone"></el-input>
          </el-form-item>
          <el-form-item label="创建日期:">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.createDate" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="clear:both">
            <el-button type="primary" @click="searchStuffContract">查询</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>

        <!-- 新增材料采购合同 -->
        <div class="add_contract">
          <el-button type="primary" @click="addStuffContract">新增材料采购合同</el-button>
        </div>
      </div>

      <!-- 材料采购合同表 -->
      <div class="stuff_table">
        <template>
          <el-table :data="contractData" v-loading="loading" border style="width: 90%">
            <el-table-column type="index" width="50" label="序号">
            </el-table-column>
            <el-table-column prop="contractNo" label="合同编号" width="180">
            </el-table-column>
            <el-table-column prop="contractName" label="合同名称" width="150">
            </el-table-column>
            <el-table-column prop="projectName" label="关联项目">
            </el-table-column>
            <el-table-column prop="heTongMoney" label="合同金额(万)">
            </el-table-column>
            <el-table-column prop="supplierName" label="乙方名称">
            </el-table-column>
            <el-table-column prop="legalPerson" label="联系人">
            </el-table-column>
            <el-table-column prop="legalPersonPhone" label="联系方式">
            </el-table-column>
            <el-table-column prop="name" label="创建人">
            </el-table-column>
            <el-table-column prop="createDate" label="创建日期" width="180">
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button @click="editStuffContract(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteDialog=true,delStuffContract(scope.row)" type="text" size="small">删除
                </el-button>
                <el-button @click="stuffContractDetails(scope.row)" type="text" size="small">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <!-- 确认删除弹框 -->
        <el-dialog title="删除确认" :visible.sync="deleteDialog" width="30%" :before-close="handleClose">
          <p class="text_one">是否确认删除该合同</p>
          <p class="text">删除后将不可恢复</p>
          <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialog = false">取 消</el-button>
            <el-button type="primary" @click="deleteDialog = false,confirmDel()">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 不可删除弹框 -->
        <el-dialog title="删除提示" :visible.sync="confirmDelDialog" width="30%" :before-close="handleClose">
          <p class="text_one">该表绑定了若干数据</p>
          <p class="text">暂不支持删除操作</p>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmDelDialog = false">我知道了</el-button>
          </span>
        </el-dialog>

        <!-- 页码 -->
        <div id="pages">
          <el-pagination background layout="prev, pager, next" @current-change="handelStuffCurrentPage"
            :current-page="stuffCurrentPage" :page-size="stuffPageSize" :total="stuffTotal">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>
<style src="./style/stuff.css">
</style>
<script>
import typeMixin from "../../../minxins/contractMixin/typeMixin";
export default {
  mixins: [typeMixin],
  data () {
    return {
      // 材料合同表分页
      stuffCurrentPage: 1,
      stuffPageSize: 10,
      stuffTotal: 1,
      // 删除弹框
      deleteDialog: false,
      // 删除状态
      isAllow: false,
      // rowId
      rowId: '',
      // 不可删除弹框
      confirmDelDialog: false,
      // 加载
      loading: true,
      // 多条件查询表单数据
      form: {
        // 编号
        contractNo: '',
        // 时间
        createDate: '',
        // 关联项目
        relation: '',
        // 当前页
        currentPage: 1,
        // 联系人
        legalPerson: '',
        // 联系人电话
        legalPersonPhone: '',
        // 展示条数
        pageSize: 10,
        // 项目ID
        projectId: 1,
        // 乙方名称
        supplierName: ''
      },
      // 材料采购合同表
      contractData: [
        {
          // 合同名称
          contractName: '',
          // 项目编号
          contractNo: '',
          // 创建日期
          createDate: '',
          // 合同金额
          heTongMoney: '',
          // id
          id: '',
          // 负责人
          legalPerson: '',
          // 负责人电话
          legalPersonPhone: '',
          // 负责人
          name: '',
          // 项目id
          projectId: 1,
          // 关联项目
          projectName: '',
          // 供应商id
          supplierId: '',
          // 乙方名称
          supplierName: '',
        }
      ],

    };
  },
  methods: {
    demo () {
      console.log(this.value);
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => { });
    },
    // 材料采购表分页
    handelStuffCurrentPage (index) {
      this.stuffCurrentPage = index;
      this.stuffContract()
    },
    // 编辑材料采购页面
    editStuffContract (row) {
      this.$router.push({ path: '/contract/stuff/editStuffContract', query: { ...row } })
      // this.$router.push()
    },
    // 材料采购详情页面
    stuffContractDetails (row) {
      this.$router.push({ path: '/contract/stuff/stuffDetailsContract', query: { id: row.id } })
    },
    // 添加材料采购页面
    addStuffContract () {
      this.$router.push('/contract/stuff/stuffAddContract')
    },

    // -----------------------------api部分--------------------------------------
    // 查看材料管理合同
    stuffContract () {
      this.$contractApi.stuffContract(this.stuffCurrentPage, this.stuffPageSize, this.form.projectId).then(res => {
        if (res.data.code == 200) {
          this.loading = false;
          this.contractData = res.data.data
          this.stuffCurrentPage = res.data.total
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(res => {
        console.log(res);
      })
    },
    // 多条件搜索材料合同
    searchStuffContract () {
      this.form.currentPage = this.stuffCurrentPage
      this.$contractApi.searchStuffContract(this.form).then(res => {
        if (res.data.code == 200) {
          this.contractData = res.data.data
          this.$message.success("查询成功！")
        } else {
          this.$message.error(res.data.msg)
        }
      }
      )
    },
    // 删除合同
    delStuffContract (row) {
      if (this.rowId == '') {
        this.rowId = row.id
      }
      if (this.isAllow) {
        this.$contractApi.delStuffContract(this.rowId).then((res) => {
          if (res.data.code == 200) {
            this.$message.warning(res.data.msg)
          } else if (res.data.code == 306) {
            this.confirmDelDialog = true
            console.log(res);
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },
    // 确认删除
    confirmDel () {
      this.isAllow = true;
      this.delStuffContract();
    },
  },
  created () {

  },
  mounted () {
    this.stuffContract()
    this.getRelation()
  },
  computed: {

  }
};
</script>

<style scoped lang="less">
</style>
